import React from 'react';
class Oa extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      info: [
        {
          value: "grapefruit",
          name: "葡萄柚"
        },
        {
          value: "lime",
          name: "酸橙"
        },
        {
          value: "coconut",
          name: "椰子"
        },
        {
          value: "mango",
          name: "葡萄芒果柚"
        }
      ]
    }
  }
  getOption = () => {
    const option = this.state.info.map( (x, index) => {
      return (
        <option key={index} value={x.value}>{x.name}</option>
      );
    });
    return option;
  }
  render() {
    return (
      <React.Fragment>
        {/* 这里加括号是为了能够立即执行这个方法，以获取配置 */}
        {this.getOption()}
        {/* <option value="grapefruit">葡萄柚</option>
        <option value="lime">酸橙</option>
        <option value="coconut">椰子</option>
        <option value="mango">芒果</option> */}
      </React.Fragment>
    );
  }
}
class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'coconut',
      info: [
        {
          value: "grapefruit",
          name: "葡萄柚"
        },
        {
          value: "lime",
          name: "酸橙"
        },
        {
          value: "coconut",
          name: "椰子"
        },
        {
          value: "mango",
          name: "葡萄芒果柚"
        }
      ]
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  getOption = () => {
    const option = this.state.info.map( (x, index) => {
      return (
        <option key={index} value={x.value}>{x.name}</option>
      );
    });
    return option;
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('你喜欢的风味是: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          选择你喜欢的风味:
          <select value={this.state.value} onChange={this.handleChange}>
            {/* <Oa/> */}
            {this.getOption()}
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}
export {
  FlavorForm 
}